<!--
 * @Author: your name
 * @Date: 2021-08-12 19:45:03
 * @LastEditTime: 2021-08-12 21:35:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\3-html&css\day09\04-二级菜单.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #head-top{
        height:40px;
        background-color: #e3e4e5;
    }
    #head-top>ul{
        float:right;
        list-style-type: none;
        margin-top: 10px;
        height:20px;
        line-height: 20px;
    }
    #head-top>ul>li{
        float:left;
        padding:0 10px;
        border-left:1px solid #666;
        position:relative;
    }
    #head-top>ul>li:first-child{
        border-left:none;
    }
    #head-top>ul>li:hover{
    cursor: pointer;
}
    #head-top>ul>li:hover>.sub-nav{
        list-style-type: none;
    display: block;
    background-color: white;
}
#head-top>ul:hover>li:nth-child(3){
    display: block;
    background-color: white;
}
#head-top>ul .sub-nav{
    position: absolute;
    top:30px;
    left:0px;
    background-color: white;
    color:black;
    width: 100%;
    display:none;
}
#head-top>ul .sub-nav .triangle{
    position: absolute;
    left:calc(50% - 8px);
    top:-16px;
    color:white;
}
    </style>
</head>
<body>
    <header id="head-top">
        <!-- <div></div> -->
        <ul>
            <li>你好，请登录 免费注册</li>
            <li>我的订单</li>
            
            <li>我的京东^
            <ul  class="sub-nav">
                <li>待处理订单</li> 
                <li>返修退换货</li>
                <li>降价商品</li>
                <li>我的京豆</li>
                <li>我的白条</li>
                <li>我的问答</li>
                <li>我的关注</li>
                <li>我的优惠卷</li>
                <li>我的理财</li>
             </ul>
            </li>
            <li>京东会员</li>
            <li>企业采购^</li>
            <li>客户服务^</li>
            <li>网站导航^</li>
            <li>手机京东</li>
           
             
              
                
            
        </ul>
    </header>
</body>
</html>